<template>


    <div >
        <!-- 添加购物车小红球 -->
        <transition
       @before-enter="beforeEnter"
       @enter="enter"
       @after-enter="afterEnter"
        >
            <div class="xq" v-show="hide" ref="ball"></div>
        </transition>
    
           <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swipr :list="listt" :isfull="false" class="left"></swipr>
					</div>
				</div>
			</div>
            	<div class="mui-card">
				<div class="mui-card-header">{{id}}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					 <p>
                         市场价:<del>￥2399</del>&nbsp;&nbsp;销售价:<span class="now">￥ {{price}}</span>
                     </p>
                     <p>
                         购买数量:<number  @getNumber="getnb"></number>
                     </p>
                     <mt-button type="primary" size="small">立即购买</mt-button>
                       <mt-button type="danger" size="small" @click="getxiaoq">加入购物车</mt-button>
					</div>
				</div>
				
			</div>
			<div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
					<p>商品货号:SD2932214404</p>
                    <p>库存情况:60件</p>
                    <p>上架时间:2020.04.03</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="goshop">图文介绍</mt-button>
                    <mt-button type="danger" size="large" plain @click="gocomment">商品评论</mt-button>
                </div>
			</div>
     
        <!-- 主体 -->
     
    </div>
</template>

<script>
// 导入轮播图组件
import swipr from '../gonggong/lunbotu.vue'

// 导入购物件数的插件
import number from '../gonggong/number.vue'

export default {
   
    data(){
        return {
            listt:[
                "https://img.alicdn.com/imgextra/i3/725677994/O1CN01tbBYJD28vIjOUWUUb_!!725677994.jpg_430x430q90.jpg",
                "https://g-search3.alicdn.com/img/bao/uploaded/i4/i1/2619156178/O1CN01bYRvrN1vVZQwgupMu_!!2619156178.jpg_580x580Q90.jpg_.webp",
                "https://g-search1.alicdn.com/img/bao/uploaded/i4/i4/1776456424/O1CN01B28K9a1xKEv21DKMX_!!0-item_pic.jpg_580x580Q90.jpg_.webp"
            ],
           
            hide:false,
            servernb:1,
            id:"华为荣耀手机",
            // count:this.servernb
            price:2399
          
                
        }
    },
    methods:{
        // 商品图文路由
        goshop(){
     
            this.$router.push({name:"shop"})
        },
        // 商品评论路由
        gocomment(){
            this.$router.push({name:"comment"})
        },
        getnb(cont){
          this.servernb=cont
          console.log("父组件收到的数据"+this.servernb)
        },
        // 点击购物车
        getxiaoq(){
            // 添加到购物车
           this.hide=!this.hide
           console.log(this.price)
            //{ id: 商品的id，count：要购买的数量，price:商品的单价，selected:false}
            // 拼接出一个，要保存到store中car 数组里的商品信息对象
            var goodsinfo={
                id:this.id,
                count:this.servernb,
                prices:this.price,
                selected:true

            };
            // 调用store中的mutations来将商品加入购物车
            this.$store.commit('addToCar',goodsinfo)

        
            console.log(this.$store.state.car)
        },
        beforeEnter(el){
            el.style.transform="translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;
            // 小球的位置应该是随着页面的变化而发生改变的，所以不能写死，需要通过动态获取来获取位置
            // 使用js方法 domObject.getBoundingClientRect()

            // 获取小球的在页面中的位置 可以获取到四个方向坐标值
            
            const ballPosition=this.$refs.ball.getBoundingClientRect();

            // 获取 徽标 在页面中的位置
            const badgePosition=document.getElementById('badge').getBoundingClientRect();
            // 计算出小球横纵自动的距离
           
            const XDist=badgePosition.left-ballPosition.left
            const YDist=badgePosition.top-ballPosition.top
           
            el.style.transform='translate('+XDist+'px,'+YDist+'px)';
            el.style.transition="all 0.5s cubic-bezier(0.2,-0.4, 0.46, 1.24)"; 
            // 相当于调用afterEnter
            done()
        },
        afterEnter(el){
            this.hide=!this.hide
        }
    },
    components:{
        swipr,
        number
    }
}
</script>

<style scoped>
.left{
    text-align: center;
}
.now{
    color:red;
    font-size:16px;
    font-weight: bold;
}
.mui-card-footer{
    display:block;
}
.mui-card-footer button{
    margin:15px 0;
}
.xq{
    width:15px;
    height:15px;
    background-color:red;
    border-radius:50%;
    position:absolute;
    top:390px;
    left:137px;
    z-index: 99;
   
}
</style>